<script setup lang="ts">
  import { computed, ref } from "vue";
  import { refDebounced } from "@vueuse/core";
  import type { Mail } from "../../data/mails.ts";
  import AccountSwitcher from "./AccountSwitcher.vue";
  import MailList from "./MailList.vue";
  import MailDisplay from "./MailDisplay.vue";
  import Nav, { type LinkProp } from "./Nav.vue";
  import { cn } from "@/lib/utils.ts";
  import { Separator } from "@/components/ui/separator";
  import { Input } from "@/components/ui/input";
  import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
  import { TooltipProvider } from "@/components/ui/tooltip";
  import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
  import { Icon } from "@iconify/vue";

  interface MailProps {
    accounts: {
      label: string;
      email: string;
      icon: string;
    }[];
    mails: Mail[];
    defaultLayout?: number[];
    defaultCollapsed?: boolean;
    navCollapsedSize: number;
  }

  const props = withDefaults(defineProps<MailProps>(), {
    defaultCollapsed: false,
    defaultLayout: () => [265, 440, 655],
  });

  const isCollapsed = ref(props.defaultCollapsed);
  const selectedMail = ref<string | undefined>(props.mails[0].id);
  const searchValue = ref("");
  const debouncedSearch = refDebounced(searchValue, 250);

  const filteredMailList = computed(() => {
    let result: Mail[] = [];
    const searchValue = debouncedSearch.value?.trim();
    if (!searchValue) {
      result = props.mails;
    } else {
      result = props.mails.filter((item) => {
        return (
          item.name.includes(debouncedSearch.value) ||
          item.email.includes(debouncedSearch.value) ||
          item.name.includes(debouncedSearch.value) ||
          item.subject.includes(debouncedSearch.value) ||
          item.text.includes(debouncedSearch.value)
        );
      });
    }

    return result;
  });

  const unreadMailList = computed(() => filteredMailList.value.filter((item) => !item.read));

  const selectedMailData = computed(() =>
    props.mails.find((item) => item.id === selectedMail.value)
  );

  const links: LinkProp[] = [
    {
      title: "收件箱",
      label: "128",
      icon: "lucide:inbox",
      variant: "default",
    },
    {
      title: "草稿箱",
      label: "9",
      icon: "lucide:file",
      variant: "ghost",
    },
    {
      title: "已发送",
      label: "",
      icon: "lucide:send",
      variant: "ghost",
    },
    {
      title: "垃圾邮件",
      label: "23",
      icon: "tabler:shield-off",
      variant: "ghost",
    },
    {
      title: "回收站",
      label: "",
      icon: "lucide:trash",
      variant: "ghost",
    },
    {
      title: "归档",
      label: "",
      icon: "lucide:archive",
      variant: "ghost",
    },
  ];

  const links2: LinkProp[] = [
    {
      title: "Social",
      label: "972",
      icon: "tabler:user-question",
      variant: "ghost",
    },
    {
      title: "Updates",
      label: "342",
      icon: "lucide:badge-alert",
      variant: "ghost",
    },
    {
      title: "Forums",
      label: "128",
      icon: "lucide:message-square",
      variant: "ghost",
    },
    {
      title: "购物",
      label: "8",
      icon: "lucide:shopping-cart",
      variant: "ghost",
    },
    {
      title: "Promotions",
      label: "21",
      icon: "tabler:basket-discount",
      variant: "ghost",
    },
  ];

  function onCollapse() {
    isCollapsed.value = true;
  }

  function onExpand() {
    isCollapsed.value = false;
  }
</script>

<template>
  <TooltipProvider :delay-duration="0">
    <ResizablePanelGroup
      id="resize-panel-group-1"
      direction="horizontal"
      class="h-full max-h-[900px] border shadow-lg items-stretch"
    >
      <ResizablePanel
        id="resize-panel-1"
        :default-size="defaultLayout[0]"
        :collapsed-size="navCollapsedSize"
        collapsible
        :min-size="15"
        :max-size="20"
        :class="cn(isCollapsed && 'min-w-[50px] transition-all duration-300 ease-in-out')"
        @expand="onExpand"
        @collapse="onCollapse"
      >
        <div
          :class="
            cn('flex h-[52px] items-center justify-center', isCollapsed ? 'h-[52px]' : 'px-2')
          "
        >
          <AccountSwitcher :is-collapsed="isCollapsed" :accounts="accounts" />
        </div>
        <Separator />
        <Nav :is-collapsed="isCollapsed" :links="links" />
        <Separator />
        <Nav :is-collapsed="isCollapsed" :links="links2" />
      </ResizablePanel>
      <ResizableHandle id="resize-handle-1" with-handle />
      <ResizablePanel id="resize-panel-2" :default-size="defaultLayout[1]" :min-size="30">
        <Tabs default-value="all">
          <div class="flex items-center px-4 py-2">
            <h1 class="text-xl font-bold">Inbox</h1>
            <TabsList class="ml-auto">
              <TabsTrigger value="all" class="text-zinc-600 dark:text-zinc-200">
                All mail
              </TabsTrigger>
              <TabsTrigger value="unread" class="text-zinc-600 dark:text-zinc-200">
                Unread
              </TabsTrigger>
            </TabsList>
          </div>
          <Separator />
          <div
            class="bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60"
          >
            <form>
              <div class="relative">
                <Icon
                  icon="lucide:search"
                  class="absolute left-2 top-2.5 size-4 text-muted-foreground"
                />
                <Input v-model="searchValue" placeholder="Search" class="pl-8" />
              </div>
            </form>
          </div>
          <TabsContent value="all" class="m-0">
            <MailList v-model:selected-mail="selectedMail" :items="filteredMailList" />
          </TabsContent>
          <TabsContent value="unread" class="m-0">
            <MailList v-model:selected-mail="selectedMail" :items="unreadMailList" />
          </TabsContent>
        </Tabs>
      </ResizablePanel>
      <ResizableHandle id="resiz-handle-2" with-handle />
      <ResizablePanel id="resize-panel-3" :default-size="defaultLayout[2]">
        <MailDisplay :mail="selectedMailData" />
      </ResizablePanel>
    </ResizablePanelGroup>
  </TooltipProvider>
</template>

<style scoped></style>
